<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>童话</title>
    <link rel="stylesheet" href="/css/style.css"> <!-- 引入外部 CSS -->
</head>
<body>

<div class="chat-container">
    <h1>童话故事</h1>

    <!-- 聊天框 -->
    <div class="chat-box" id="chatBox">
        <!-- 聊天内容会动态加载在这里 -->
    </div>

    <!-- 用户输入框 -->
    <form id="chatForm">
        <label for="query">输入消息：</label>
        <input type="text" id="query" name="query" required>
        <button type="submit">发送</button>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入 jQuery -->
<script src="/js/script.js"></script> <!-- 引入外部 JavaScript -->
</body>
</html>
